<template>
  <div class="flh_datakb">
    <div class="mainView">
      <mainTitle :hideLogo="false" >
        <span slot="title"  class="title">人员发展规模数据看板</span>
      </mainTitle>
      <div class="details">
        <!-- 经纪人详情 -->
        <div class="agent_details">
          <h2>经纪人详情</h2>
          <div class="total">
            <vm-progress class="numIcon" type="circle" :width="130" :strokeWidth="2" :showText="false" :percentage="100" strokeColor="#1EC1FF" trackColor="rgba(0,0,0,0)"></vm-progress>
            <div class="explain">
              <p>
                <i-count-up :startVal="startVal" :endVal="FLHPersonnelData.incumbencyNum" :decimals="decimals" :duration="duration" :options="options" />
              </p>
              <p>人员数量</p>
            </div>
          </div>
          <div class="list">
            <div class="item">
              <vm-progress class="numIcon" type="circle" :width="100" :strokeWidth="2" :showText="false" :percentage="FLHPersonnelData.entryRate" strokeColor="#FDC409" trackColor="rgba(0,0,0,0)"></vm-progress>
              <div class="explain">
                <p>
                  <i-count-up :startVal="startVal" :endVal="FLHPersonnelData.entryRate" :decimals="decimals1" :duration="duration" :options="options" />
                  <span class="unit">%</span>
                </p>
                <p>本月入职率</p>
              </div>
            </div>
            <div class="item">
              <vm-progress class="numIcon" type="circle" :width="100" :strokeWidth="2" :showText="false" :percentage="FLHPersonnelData.turnoverRate" strokeColor="#FDC409" trackColor="rgba(0,0,0,0)"></vm-progress>
              <div class="explain">
                <p>
                  <i-count-up :startVal="startVal" :endVal="FLHPersonnelData.turnoverRate" :decimals="decimals1" :duration="duration" :options="options" />
                  <span class="unit">%</span>
                </p>
                <p>本月离职率</p>
              </div>
            </div>
            <div class="item">
              <vm-progress class="numIcon" type="circle" :width="100" :strokeWidth="2" :showText="false" :percentage="FLHPersonnelData.undergraduateCoverageRate" strokeColor="#FDC409" trackColor="rgba(0,0,0,0)"></vm-progress>
              <div class="explain">
                <p>
                  <i-count-up :startVal="startVal" :endVal="FLHPersonnelData.undergraduateCoverageRate" :decimals="decimals1" :duration="duration" :options="options" />
                  <span class="unit">%</span>
                </p>
                <p>本科覆盖率</p>
              </div>
            </div>
            <div class="item">
              <vm-progress class="numIcon" type="circle" :width="100" :strokeWidth="2" :showText="false" :percentage="FLHPersonnelData.ThreeYearsEmploymentExperience" strokeColor="#FDC409" trackColor="rgba(0,0,0,0)"></vm-progress>
              <div class="explain">
                <p>
                  <i-count-up :startVal="startVal" :endVal="FLHPersonnelData.ThreeYearsEmploymentExperience" :decimals="decimals1" :duration="duration" :options="options" />
                  <span class="unit">%</span>
                </p>
                <p>三年从业经历占比</p>
              </div>
            </div>
          </div>
        </div>
        <div class="fatigueEffect">
          <h2>人员劳效</h2>
          <div class="box">
            <div class="item">
              <p>平均</p>
              <p>
                  <i-count-up :startVal="startVal" :endVal="Number(SumData.personAvg)" :decimals="decimals" :duration="1" :options="options" />
              </p>
            </div>
            <div class="item">
              <p>最高</p>
              <p>
                  <i-count-up :startVal="startVal" :endVal="Number(SumData.personMax)" :decimals="decimals" :duration="1" :options="options" />
              </p>
            </div>
          </div>
        </div>
        <div class="timerShaft">
          <h2>门店规模发展</h2>
          <div class="box">
            <div class="row">
              <div class="item">2015</div>
              <div class="item">
                <span>45</span>
                <span>家</span>
                </div>
            </div>
            <div class="row">
              <div class="item">2016</div>
              <div class="item"><span>103</span>
                <span>家</span></div>
            </div>
            <div class="row">
              <div class="item">2017</div>
              <div class="item"><span>149</span>
                <span>家</span></div>
            </div>
            <div class="row">
              <div class="item">2018</div>
              <div class="item"><span>209</span>
                <span>家</span></div>
            </div>
            <div class="row">
              <div class="item">2019</div>
              <div class="item"><span>378</span>
                <span>家</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ICountUp from "vue-countup-v2";
import mainTitle from "@/components/flh/dataKanban/mainTitle";
import vmProgress from "vue-multiple-progress";
import {
  GetFLHPersonnelData, // 人员发展规模汇总信息
  GetSumData // 获取店均人均、经纪人最高业绩
} from "@/api/flh/home";
export default {
  components: {
    mainTitle,
    vmProgress,
    ICountUp
  },
  data() {
    return {
      FLHPersonnelData: {
        incumbencyNum: 0,
        entryRate: 0,
        turnoverRate: 0,
        undergraduateCoverageRate: 0,
        ThreeYearsEmploymentExperience: 0
      },
      SumData: {
        storeAvg: "0",
        personAvg: "0",
        personMax: "0"
      },
      startVal: 0,
      decimals: 0,
      decimals1: 1,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      }
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.fetchGetFLHPersonnelData();
      this.fetchGetSumData();
    },
    // 经纪人
    async fetchGetFLHPersonnelData() {
      var params = {
        cityId: 36001
      };
      try {
        var res = await GetFLHPersonnelData(params);
        if (res.data.code === "0") {
          this.$set(this, "FLHPersonnelData", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 业绩
    async fetchGetSumData() {
      var params = {
        timeType: "3003",
        cityId: 36001
      };
      try {
        var res = await GetSumData(params);
        if (res.data.code === "0") {
          this.$set(this, "SumData", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../../../../styles/base/_parameters";
$color0: #fff;
$color1: #55eda7;
$color2: #1ec1ff;
$color3: #fdc409;

.flh_datakb {
  @include absoluteAllSides;
  overflow: hidden;
  .mainView {
    @include absoluteAllSides(40, 40, 40, 120);

    .title {
      font-size: 48px;
    }
    // 详情
    .details {
      // 经纪人详情
      .timerShaft {
        position: absolute;
        right: 230px;
        top: 300px;
        & > h2 {
          margin: 100px auto 80px;
          color: $color1;
          font-size: 30px;
        }
        .box {
          // position: relative;
          background-image: url("/static/img/flh/news/timerShaft.png");
          background-position: center 28px;
          background-repeat: no-repeat;
          background-size: auto 100%;
          .row {
            height: 80px;
            &:nth-child(-n + 3) {
              .item {
                color: #55eda7;
                &:nth-of-type(1) {
                  // font-size: 24px;
                  @include din(24px);
                  margin-right: 40px;
                  text-align: right;
                }
                &:nth-of-type(2) {
                  margin-left: 40px;
                  text-align: left;
                  span {
                    &:nth-of-type(1) {
                      // font-size: 30px;
                      @include din(30px);
                    }
                    &:nth-of-type(2) {
                      font-size: 18px;
                      // @include din(18px);
                    }
                  }
                }
              }
            }
            &:nth-of-type(4) {
              .item {
                color: #fdc409;
                &:nth-of-type(1) {
                  // font-size: 28px;
                  @include din(28px);
                }
                &:nth-of-type(2) {
                  span {
                    &:nth-of-type(1) {
                      // font-size: 36px;
                      @include din(34px);
                    }
                    &:nth-of-type(2) {
                      font-size: 20px;
                    }
                  }
                }
              }
            }
            &:nth-of-type(5) {
              .item {
                color: #e5e5e5;
                &:nth-of-type(1) {
                  // font-size: 24px;
                  @include din(24px);
                }
                &:nth-of-type(2) {
                  span {
                    &:nth-of-type(1) {
                      // font-size: 30px;
                      @include din(30px);
                    }
                    &:nth-of-type(2) {
                      font-size: 18px;
                    }
                  }
                }
              }
            }
          }
          // &:after {
          //   content: "";
          //   position: absolute;
          //   right: 300px;
          //   top: 25px;
          //   z-index: 1;
          //   width: 621px;
          //   height: 455px;
          //   background-image: url("/static/img/flh/news/timerShaft.png");
          //   background-position: center;
          //   background-repeat: no-repeat;
          //   background-size: 100% 100%;
          // }
        }
      }
      .fatigueEffect {
        position: absolute;
        right: 202px;
        top: 0px;
        & > h2 {
          margin: 100px auto 80px;
          color: $color1;
          font-size: 30px;
        }
        .box {
          display: flex;
          justify-content: space-around;
          align-items: center;
          padding: 0 80px;
          width: 740px;
          height: 120px;
          background-image: url("/static/img/flh/news/fatigueEffect.png");
          background-position: center bottom;
          background-repeat: no-repeat;
          background-size: 100%;
          margin-left: 20px;
          .item {
            & > p {
              text-align: center;
              &:nth-of-type(1) {
                color: $color0;
                font-size: 24px;
              }
              &:nth-of-type(2) {
                color: $color2;
                // @include blod(50px);
                @include din(50px);
                line-height: 1;
              }
            }
          }
        }
      }
      .agent_details {
        position: absolute;
        width: 800px;
        z-index: 2;
        & > h2 {
          margin: 100px auto 80px;
          color: $color1;
          font-size: 30px;
        }
        .total {
          display: flex;
          height: 120px;
          align-items: center;
          .numIcon {
            position: relative;
          }
          .numIcon:after {
            position: absolute;
            content: "";
            width: 100px;
            height: 100px;
            left: 15px;
            top: 15px;
            background-image: url("../../../../../../static/img/flh/news/icon1.png");
            background-size: 100%;
          }
          .explain {
            margin-left: 20px;
            & > p {
              &:nth-of-type(1) {
                color: $color2;
                // @include blod(68px);
                @include din(68px);
                line-height: 1;
              }
              &:nth-of-type(2) {
                color: $color0;
                font-size: 24px;
              }
            }
          }
        }
        .list {
          margin-top: 80px;
          display: flex;
          flex-wrap: wrap;
          .item {
            width: 352px;
            &:nth-of-type(1) {
              margin-right: 60px;
              margin-bottom: 70px;
              .numIcon:after {
                position: absolute;
                content: "";
                width: 70px;
                height: 70px;
                left: 15px;
                top: 15px;
                background-image: url("../../../../../../static/img/flh/news/icon2.png");
                background-size: 100%;
              }
            }
            &:nth-of-type(2) {
              margin-bottom: 70px;
              .numIcon:after {
                position: absolute;
                content: "";
                width: 70px;
                height: 70px;
                left: 15px;
                top: 15px;
                background-image: url("../../../../../../static/img/flh/news/icon3.png");
                background-size: 100%;
              }
            }
            &:nth-of-type(3) {
              margin-right: 60px;
              .numIcon:after {
                position: absolute;
                content: "";
                width: 70px;
                height: 70px;
                left: 15px;
                top: 15px;
                background-image: url("../../../../../../static/img/flh/news/icon4.png");
                background-size: 100%;
              }
            }
            &:nth-of-type(4) {
              .numIcon:after {
                position: absolute;
                content: "";
                width: 70px;
                height: 70px;
                left: 15px;
                top: 15px;
                background-image: url("../../../../../../static/img/flh/news/icon5.png");
                background-size: 100%;
              }
            }
            display: flex;
            height: 100px;
            align-items: center;
            .numIcon {
              position: relative;
            }

            .explain {
              margin-left: 20px;
              & > p {
                &:nth-of-type(1) {
                  color: $color3;
                  @include din(50px);
                  line-height: 1;
                }
                &:nth-of-type(2) {
                  color: $color0;
                  font-size: 24px;
                }
              }
              .unit {
                font-size: 40px;
              }
            }
          }
        }
      }
    }
    &:after {
      content: "";
      position: absolute;
      right: 510px;
      bottom: 100px;
      z-index: 1;
      width: 621px;
      height: 455px;
      background-image: url("/static/img/flh/news/man.png");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
